<template>
  <div class="question">
    <div class="topic_collection">
      <p class="question_font leftFolat">题目收藏</p>
    </div>
    <div
      class="topics"
      v-for="item in questionList.slice(
        pageSize * (currentPage - 1),
        pageSize * currentPage
      )"
      v-bind:key="item.id"
    >
      <span class="topic"
        >&nbsp;&nbsp;{{ item.id }}、{{ item.subjectName }}</span
      >
      <el-button
        style="float: right; margin-top: 5px; margin-right: 5px"
        @click="handleDelete(item.id)"
        >删除</el-button
      >
    </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="[5,10,15,20]"
        :page-size="pageSize"
        layout="total, sizes , prev, pager, next"
        :total="questionList.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import "@/assets/css/question.css";
const defaultQuestionList = [
  { id: 1, subjectName: "两数之和" },
  { id: 2, subjectName: "两数之和" },
  { id: 3, subjectName: "两数之和" },
  { id: 4, subjectName: "两数之和" },
  { id: 5, subjectName: "两数之和" },
  { id: 6, subjectName: "两数之和" },
  { id: 7, subjectName: "两数之和" },
  { id: 8, subjectName: "两数之和" },
  { id: 9, subjectName: "两数之和" },
];
export default {
  name: "quesion",
  data() {
    return {
      questionList: [],
      currentPage: 1,
      pageSize: 5,
    };
  },
  created() {
    this.getQuestionList();
  },
  methods: {
    handleDelete(id) {
      console.log(id);
    },
    getQuestionList() {
      this.questionList = defaultQuestionList;
    },
    handleSizeChange(value){
      this.pageSize = value;
    }
  },
};
</script>

<style></style>
